<template>
  <div class="content">
    <UserIndexTop :showfun="hidden"></UserIndexTop>
    <div class="backButton">
      <el-button type="text" @click="$router.go(-3)">返 回</el-button>
    </div>
    <div class="page_content">
      <div class="title">
        <div class="text">授权小程序</div>
        <div class="button">
          <el-button type="text">小程序授权审核发布指南</el-button>
        </div>
      </div>
      <div class="box_content">
        <div class="box_title">授权小程序后，即可发布小程序</div>
        <div class="box_text">1.微信官方规定：用户必须自己进行小程序注册。然后才可以将小程序授权给任意第三方进行设计和代码管理。</div>
        <div class="box_text">
          2.微信官方规定：小程序个人开放的服务类目是有严格规定的，内容不在服务类目中的，是审核不通过的。
          <el-button type="text">查看详情</el-button>
        </div>
        <div class="box_button">
          <el-button type="primary" @click="saveLink()">我已有小程序，直接授权</el-button>
          <el-button style="margin-left: 50px">注册小程序账号</el-button>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="showEmpower" @close="showEmpower=false" width="500px">
      <el-form label-width="80px" style="margin-right:20px">
        <el-form-item label="链接地址">
          <el-input v-model="linkUrl" clearable></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center">
        <el-button type="primary" @click="saveLink">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showQrcode" @close="showQrcode=false" width="300px">
      <div class="code_box">
        <img :src="qrcodeUrl" alt />
      </div>
      <div class="code_button">使用公众平台绑定的管理员个人微信号扫描</div>
    </el-dialog>
  </div>
</template>
<script>
import UserIndexTop from "@/components/IndexCon/userindextop";
import { SetEmpower, GetEmpower } from "@/api/wx_config";
import store from "@/store/index";
export default {
  components: {
    UserIndexTop
  },
  data() {
    return {
      showEmpower: false, // 显示授权窗口
      linkUrl: "", // 二维码链接地址
      showQrcode: false, // 显示二维码
      qrcodeUrl: "", // 二维码url
      appid: "",
      empowered: false
    };
  },
  mounted() {
    this.appid = this.$route.query.appid;
    console.log(this.appid);
    this.getData();
    // this.linkUrl = "https://cs.58zltc.com/configuration/subScription/home"; //测试
    this.linkUrl = "http://mobshop.58zltc.com/configuration/subScription/home"; // 正式
    if (localStorage.getItem('baseStatus') === "test") {
      this.linkUrl = "http://cs1.58zltc.com/configuration/subScription/home"; // 测试
    }
  },
  methods: {
    // 获取状态
    getData() {
      GetEmpower(this.appid).then(res => {
        if (res.code === 200) {
          this.empowered = true;
        }
      });
    },
    // 保存二维码链接
    saveLink() {
      localStorage.setItem("token", store.state.user.token);
      localStorage.setItem("app_id", this.appid);
      SetEmpower(this.appid, this.linkUrl).then(res => {
        if (res.code === 200) {
          console.log(res.data);
          this.$message({
            type: "success",
            message: res.msg
          });
          // this.showEmpower = false;
          // return false;
          window.location.href = res.data;
          // GetEmpower(this.appid).then(res=>{
          //   if(res.code == 200){
          //     this.showQrcode = true;
          //     this.qrcodeUrl = res.data.qrcode_url;
          //   }
          // })
          // this.$router.push({path: '/callback', query:{appid:this.appid}})
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  min-width: 1440px;
  height: 100%;
  overflow: hidden;
  position: relative;
  .page_content {
    width: 1024px;
    min-width: 1024px;
    height: auto;
    margin: 100px auto 0;
    padding: 0 5px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.07);
    .title {
      color: #666;
      border-bottom: 1px solid #999;
      height: 60px;
      line-height: 60px;
      display: flex;
      .text {
        font-size: 18px;
        flex: 1;
        padding-left: 15px;
      }
      .button {
        font-size: 13px;
      }
    }
    .box_content {
      margin-top: 60px;
      padding-bottom: 60px;
      .box_title {
        font-size: 18px;
        color: #333;
        line-height: 70px;
        text-align: center;
      }
      .box_text {
        color: #999;
        padding-left: 100px;
      }
      .box_button {
        margin-top: 40px;
        text-align: center;
      }
    }
  }
  .backButton {
    position: absolute;
    top: 12px;
    right: 20px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #5b93ff;
    line-height: 40px;
    color: #5b93ff;
    text-align: center;
    width: 80px;
    z-index: 99999;
  }
  .code_box {
    width: 260px;
    height: 260px;
    margin: 0 auto;
    border: 1px solid #333;
    img {
      width: 260px;
      height: 260px;
    }
  }
  .code_button {
    margin-top: 5px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
